<template>
  	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
		<gridMenu :gridItems="gridItems" count="4" ptop="70rpx" mbottom="10rpx" gap="0rpx"/>

	<view class="page-container">
		<!-- 今日服务工单部分 -->
		<view class="today-service" style="margin-bottom: 200rpx;">
			<view class="section-header">
				<text class="title text13">今日服务工单</text>
				<text class="count text13">{{ workOrders?.length }}单</text>
			</view>

			<!-- 工单列表 -->
			<view class="order-list">
				<!-- 工单项 -->
				<view class="order-item" v-for="(order, index) in workOrders" :key="index" @click="handleDetail(order)">
					<view class="order-header">
						<view class="order-number">
							<text class="text12">服务时间：{{ order.serviceTime }}</text>
						</view>
						<view class="order-status text12" :class="order.statusClass">
							{{ order.statusText }}
						</view>
					</view>

					<view class="order-info">
						<view class="info-row text11">
							<text class="label">姓名：</text>
							<text class="value">{{ order.customerName }}</text>
						</view>
						<!-- <view class="info-row text11">
							<text class="label">员工姓名：</text>
							<text class="value">小木</text>
						</view> -->
						<view class="info-row text11">
							<text class="label">服务类型：</text>
							<text class="value">{{ order.serviceType }}</text>
						</view>
						<view class="info-row text11">
							<text class="label ">联系电话：</text>
							<text class="value">{{ order.phone }}</text>
						</view>
						<view class="info-row text11">
							<text class="label">地址：</text>
							<text class="value">{{ order.address }}</text>
						</view>
					</view>
 
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="workOrders.length === 0">
					<wd-icon name="order-o" size="60" color="#ccc"></wd-icon>
					<text class="empty-text">今日暂无服务工单</text>
					<wd-button type="primary" size="small" @click="grabOrder">去抢单</wd-button>
				</view>
			</view>
		</view>
	</view>

	<!-- <SimpleTabBar /> -->
<!-- 	<TabComponent :tabs="currentTabs" @change="onTabChange" /> -->

</template>

<script setup>
	import gridMenu from "@/components/grid-menu/index" 

	import {
		my_workorderApi
	} from "@/api/volunteer"
	
import {
		ref,
		onMounted,
		computed,
		nextTick
		} from 'vue';
	import {
		useRouter
	} from 'uni-mini-router'
	
	import { onShow } from '@dcloudio/uni-app';
	

	
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
		const fontSizeStore = useFontSizeStore();
	import {
		useTabStore
	} from '@/stores/tabs'
	import {
		ROLE_TABS
	} from "@/config/roles"
	import TabComponent from '@/components/tab-bar/index.vue'
	
	import { useShare } from '@/utils/useShare';
	
	// 配置分享内容
	const { onShareAppMessage, onShareTimeline } = useShare({
	  title: '欢迎',
	  path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
	  imageUrl: '/static/share-cover.jpg',
	  query: '' // 朋友圈参数（可选）
	});
	

	const tabStore = useTabStore()
	const router = useRouter();
	const myRole=ref("")
	
	// ✅ 计算当前角色的 tabs
	const currentTabs = computed(() => {
	const userRole = uni.getStorageSync('userRole')
	const role = myRole.value || userRole
		return ROLE_TABS[role]?.tabs || ROLE_TABS['default']?.tabs || []
	})
	
	// ✅ Tab 点击处理
	const onTabChange = (tab) => {
		nextTick(()=>{
		router.pushTab({
			name: tab.key
		}) 	
		})
	}

	// 工单列表数据 - 使用ref定义响应式数据
	const workOrders = ref([]);

	onMounted(() => {
	  	 const userRole = uni.getStorageSync('userRole')
		const role = myRole.value || userRole
		my_workorderApi({
			id: 1
		}).then((res) => {
			if (res.code == 200) {
				workOrders.value = res.data
			}
		})
	})

	const gridItems = ref([{
			iconClass: 'order-icon',
			iconName: 'icon-xiadan4',
			text: '订单管理',
			pathName: "common_orderList"
		},
		{
			iconClass: 'urgent-icon',
			iconName: 'icon-yijian',
			text: '一键抢单',
			pathName: "common_pointsSupermarket",
			name:"qiangdan"
		},
		{
			iconClass: 'dispatch-icon',
			iconName: 'icon-fuwujilu3',
			text: '服务记录',
			pathName: "common_serviceRecord"
		},
		{
			iconClass: 'record-icon',
			iconName: 'icon-fuwujilu-',
			text: '积分超市',
			pathName: "common_pointsSupermarket",
			name:"jifen_chaoshi"
		}
	]);

	// 任务中心按钮事件
	const handleOrderManage = () => {
		console.log('点击订单管理');
		// 实际应用中可使用uni.navigateTo跳转
	};
	const navigationUrl = (item) => {
		router.push({
			name: item.pathName,
			params: {
				name: item.pathName
			}
		})
	}
	
	onShow(()=>{
	 	 const userRole = uni.getStorageSync('userRole')
		 myRole.value=userRole;
	})
	const handleOneKeyGrab = () => {
		console.log('点击一键抢单');
	};

	const handleServiceRecord = () => {
		console.log('点击服务记录');
	};

	const handleIntegralSupermarket = () => {
		console.log('点击积分超市');
	};

	// 工单相关事件
	const handleContact = (phone) => {
		console.log('联系客户:', phone);
		// 调用拨号功能
		uni.makePhoneCall({
			phoneNumber: phone
		});
	};

	const handleDetail = (order) => {
		console.log('查看详情:', order);
		// 跳转到详情页示例
		// uni.navigateTo({
		//   url: `/pages/orderDetail/index?orderNo=${order.orderNo}`
		// });
		router.push({
			name: "volunteer_serverDetail",
			params: {
				orderNo: order.orderNo
			}
		})
	};

	const handleAction = (order) => {
		console.log('执行操作:', order);
	};

	const grabOrder = () => {
		console.log('去抢单');
	};

	// 开始服务
	const startService = (order) => {
		// 实际应用中这里会调用接口更新订单状态

	};
</script>

<style scoped lang="less">
	@import '@/static/styles/volunteer/home/index.less';
	@import '@/static/styles/commerce/home/grid_menu_items.less';

	.page-container {
		padding: 30rpx;
	}

	/* 工单列表样式 */
	.order-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.order-item {
		border-radius: 12rpx;
		padding: 20rpx;
		background-color: #fff;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		padding-bottom: 15rpx;
		padding-top: 15rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.order-number {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.order-status {
		font-size: 26rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		font-weight: 500;
	}

	.status-pending {
		background-color: #fff7e6;
		color: #ff9d00;
	}

	.status-processing {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.status-completed {
		background-color: #f6ffed;
		color: #52c41a;
	}

	.order-info {
	 line-height: 60rpx;
	}

	.info-row {
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.label {
		color: #666;
	}

	.value {
		color: #333;
		flex: 1;
		word-break: break-all;
	}

	.order-actions {
		display: flex;
		gap: 12rpx;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
		color: #999;
	}

	.empty-text {
		margin: 20rpx 0;
		font-size: 28rpx;
	}

	.section-header {
		margin-top: 50rpx;
		margin-bottom: 20rpx;
		

		.title {
			font-weight: 500;
		}
	}
</style>